<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    EventBus 中央事件总线

      概念：
        一般用于，没有直接关系的组件上

      核心原理：
        发布订阅

      使用：

        Vue2 
          可以直接 new 一个 空的 Vue 实例对象，借助该实例对象上的 
            $on     来做订阅
            $emit   来做发布
            $off    来做取消订阅

        Vue3
          https://v3-migration.vuejs.org/zh/breaking-changes/events-api.html

          不能使用 Vue2 的 new Vue() 方式，这时我们需要使用一些第三方的包或者自己实现一个发布订阅模式的代码

          第三方包：mitt \ tiny-emitter

   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script src="../lib/mitt.umd.js"></script>
    <script>
      // 调用 mitt() 得到一个对象
      const eventBus = mitt();

      console.log("eventBus", eventBus);

      const app = Vue.createApp({
        template: `
          <div>
            <h1>事件总线的玩法</h1>

            <button @click="show = !show">toggle</button>
            <hr />

            <Hello v-if="show" />

            <hr />

            <World />
          </div>
        `,

        data() {
          return {
            show: true,
          };
        },
      });

      app.component("Hello", {
        template: `
          <div>
            <p>Hello, {{ count }}</p>  
          </div>
        `,

        data() {
          return {
            count: 1,
          };
        },

        mounted() {
          // console.log("this", this);

          eventBus.on("increment", (payload) => {
            console.log("increment 被触发了", payload);

            this.count++;
          });
        },

        unmounted() {
          eventBus.off("increment");
        },
      });

      app.component("World", {
        template: `
          <div>
            <p>World</p>
            <button @click="onClick">触发事件</button>
          </div>
        `,

        methods: {
          onClick() {
            // 使用 eventBus.emit() 来触发一个事件

            eventBus.emit("increment");
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
